<template>
  <div>
    <el-popover
      placement="bottom-start"
      :width="120"
      style="margin: 0; padding: 0"
      trigger="click"
    >
      <template #reference>
        <font-awesome-icon
          style="outline: 0; color: #666666; margin-right: 10px"
          :icon="['fa', row.icon]"
        />
      </template>
      <div
        style="
          max-height: 500px;
          width: 100%;
          overflow-y: auto;
          padding: 10px 0px;
        "
      >
        <ul>
          <li class="sub-item ellipsis">
            <oss-upload @complete="handleComplete"></oss-upload>
          </li>
          <li class="sub-item ellipsis" @click="netFlag = true">网络图片</li>
        </ul>
      </div>
    </el-popover>

    <!--网络图片-->
    <el-dialog
      center
      title="添加网络图片"
      v-model="netFlag"
      width="500px"
    >
      <el-form :model="formData" ref="formRef">
        <el-form-item label="图片地址" prop="configName">
          <el-input
            v-model.trim="formData.url"
            clearable
            placeholder="请输入图片地址，例如:https://xxx.com"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleAdd">保 存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" >
import { getCurrentInstance, reactive, defineComponent, toRefs } from "vue";

import ossUpload from "@/components/ossUpload.vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  props: {
    row: {
      type: Object,
      default: () => {},
    },
    editor: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    ossUpload,
  },
  name: "imageButton",
  setup(props, { emit }) {
    const state = reactive({
      color: "",
      picker: null,
      netFlag: false,
      formData: {
        url: "",
      },
    });
    const { proxy } = getCurrentInstance() as any;

    const handleComplete = (val) => {
      props.editor
        .chain()
        .focus()
        .setImage({
          src: val,
        })
        .run();
    };

    const handleAdd = () => {
      if (state.formData.url == "") {
        ElMessage.error("请输入地址");
        return false;
      }
      handleComplete(state.formData.url);
    };

    return {
      ...toRefs(state),
      handleComplete,
      handleAdd,
    };
  },
});
</script>
